<template>
	<view>
		<view class="item" v-for="item in storeList">
			<view class="first">
				<image :src="item.mini_banner" class="img"></image>
				<view class="box" @click="goStore(item.mer_id)">
					<view>
						<text class="title">{{item.mer_name }}</text>
						<view class="rate">
							<uniRate :readonly="true" active-color="#FB6E4E" :value="item.service_score" />
							<text class="peson">{{item.care_count}}人关注</text>
						</view>
					</view>
					<view class="second">
						<view class="m-t">
							<view class="addr">{{item.mer_info}}</view>
							<view class="v-tag text-border">{{item.type_name}}</view>
						</view>
						<view class="right">
							<text>销售{{item.sales}}+</text>
							<view class="limsize">
								<image src="/static/images/map.png" class="map"></image>
								<text> {{ item.distance||'0km'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="btm">
				<view class="v-fie" v-for="aco in item.recommend" @click="product(aco.product_id)">
					<view style="display: flex; align-items: center;">
						<text class="hui">惠</text>
						<view class="price">￥{{aco.price}}</view>
						<view class="f-cut">￥{{aco.cost}}</view>
					</view>
					<view class="fixTi">{{aco.store_name}}</view>
				</view>

			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper' v-if="loading">
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
			{{ loadTitle }}
		</view>

		<view class='no-shop' v-if="!storeList.length && !loading && !loadingIcon" v-cloak>
			
				
				<view class="vipage">该区暂未开通商户，敬请期待</view>
			
		</view>
	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import {
		storeMerchantList
	} from '@/api/store.js';
	export default {
		components: {
			uniRate
		},

		data() {
			return {
				loading: false,
				count: 0,
				storeList: [],
				loadingIcon: "",
				page: 0,
				order:"",
				loadTitle: "加载中..."
			}
		},
		watch: {

		},
		created() {
			this.storeMerchantList();
		},
		methods: {
			loadData() {
				if (this.count === this.storeList.length) {
					if (this.count === 0) {
						return
					}
					uni.showToast({
						title: '已加载全部',
						icon: 'none',
						duration: 1000
					});
				} else {
					this.page += 1
					this.storeMerchantList()
				}
			},
			product(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}`
				})
			},
			// 进店
			goStore(id) {
				if (this.hide_mer_status != 1) {
					uni.navigateTo({
						url: `/pages/store/home/index?id=${id}`
					})
				}
			},
			storeMerchantList() {
				if (this.loading) return
				this.loading = true
				let rqData = {
					page: this.page,
					limit: 10,
					order: this.order,
				}
				const info = uni.getStorageSync('localAddress')
				rqData.location = info.latitude + ',' + info.longitude
				rqData.city=info.city;

				storeMerchantList(rqData).then(res => {
					this.count = res.data.count
					this.storeList = this.storeList.concat(res.data.list)
					this.loading = false
					this.loadingIcon = false
				})
			},
		}

	}
</script>


<style scoped>
	.vipage{
		text-align: center;
		margin-top: 120rpx;
		margin-bottom: 100rpx;
		color: #999;
	}
	.price {
		color: #FB6E4E;
		margin-left: 10rpx;
	}

	.peson {
		color: #999;
		margin-left: 10rpx;
	}

	.rate {
		display: flex;
		margin-top: 10rpx;
	}

	.f-cut {
		font-size: 24rpx;
		color: #999;
		text-decoration-line: line-through;
		margin-left: 6rpx;
	}

	.fixTi {
		margin-left: 20rpx;
		text-overflow: ellipsis;
		width: 70%;

	}

	.hui {
		background: #FB6E4E;
		color: #fff;
		padding: 10rpx;
		border-radius: 10rpx;
	}

	.v-fie {
		padding: 10rpx;
		display: flex;
	}

	.btm {
		margin-top: 30rpx;
		margin-left: 1%;
		margin-right: 1%;
		background: #F8F8F7;
		border-radius: 10rpx;

	}

	.limsize {
		display: flex;
		margin-top: 10rpx;
	}

	.map {
		width: 30rpx;
		height: 30rpx;
	}

	.right {

		font-size: 24rpx;
		color: #999999;
		line-height: 28rpx;
		text-align: right;
		font-style: normal;
	}

	.m-t {
		margin-top: 10rpx;
	}

	.second {
		display: flex;
		justify-content: space-between;
	}

	.addr {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		text-align: left;
		font-style: normal;
	}

	.text-border {
		border-radius: 4rpx;
		border: 1rpx solid #FFAA97;
	}

	.v-tag {
		text-align: center;
		height: 40rpx;
		color: #FB6E4E;
		width: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
	}

	.title {
		width: 274rpx;
		height: 42rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
		text-align: right;
		font-style: normal;
	}

	.box {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
		width: 70%;
	}

	.first {
		display: flex;
	}

	.img {
		width: 180rpx !important;
		height: 180rpx !important;
		border-radius: 18rpx;
	}

	.item {
		background: #fff;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-top: 10rpx;
	}
</style>